<template>
	<view class="page">
		<view class="top">
			<view class="top-text">1分钟提交需求 </view>
			<view class="top-text-1">极速响应 精准匹配</view>
			<image src="https://www.atuanjian.com/appletStatic/static/images/u-13.png" mode="" class="top-img" />
		</view>
		<view class="box">
			<view class="el-item">
				<view class="el-item-title"><span>*</span>客户名称</view>
				<input type="text" v-model="form.name" placeholder="请输入" />
			</view>
			<view class="el-item">
				<view class="el-item-title"><span>*</span>联系手机</view>
				<input type="number" v-model="form.name" placeholder="请输入" maxlength="11" />
			</view>
			<view class="el-item" @click="handleTime">
				<view class="el-item-title"><span>*</span>起始日期</view>
				<view class="el-item-title" style="display: flex;align-items: center;	">
					<input type="text" placeholder="请选择开始日期" disabled="true" class="input-1 input-2" />至
					<input type="text" placeholder="请选择结束日期" disabled="true" class="input-1" />
				</view>
			</view>
			<view class="el-item">
				<view class="el-item-title"><span>*</span>行程天数</view>
				<input type="number" v-model="form.name" placeholder="请输入" maxlength="11" />
			</view>
			<view class="el-item">
				<view class="el-item-title"><span>*</span>活动人数</view>
				<input type="number" v-model="form.name" placeholder="请输入" maxlength="11" />
			</view>
			<view class="el-item">
				<view class="el-item-title"><span>*</span>活动场地</view>
				<input type="number" v-model="form.name" placeholder="请输入" maxlength="11" />
			</view>
			<view class="el-item">
				<view class="el-item-title"><span>*</span>人均预算</view>
				<input type="number" v-model="form.name" placeholder="请输入" maxlength="11" />
			</view>
			<view class="el-item" style="display: block;border: none;">
				<view class="el-item-title"><span>*</span>需求描述</view>
				<textarea name="" id="" cols="10" rows="4" placeholder="请输入需求描述" />
			</view>
		</view>
		<view class="button" @click="handleSubmit">提交</view>
		<swiper :indicator-dots="false" :vertical="true" :circular="true" :autoplay="true" :interval="2000"
			:duration="1000" class="swiper" @click="nav('/pagesB/need/list')">
			<swiper-item v-for="(item,index) in 6" :key="index">
				<view class="swiper-item">
					<image src="https://www.atuanjian.com/appletStatic/static/images/u-14.svg" alt="User Avatar" />
					<view class="title">【海口市】10月27日105*****991用户提交去威海的团建需求</view>
				</view>
			</swiper-item>
		</swiper>
		<u-calendar :show="show" color="#FFBB50" :mode="mode" @confirm="confirm" @close='handleTime'></u-calendar>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				form: {},
				show: false,
				mode: 'range'
			}
		},
		onShareAppMessage() {
			
		},
		methods: {
			handleTime() {
				this.show = !this.show
			},
			confirm(e) {
				console.log(e);
			},
			handleSubmit() {
				uni.navigateTo({
					url:'/pagesB/customerService/index?status='+'success'
				})
			},
			nav(url) {
				uni.navigateTo({
					url: url
				})
			}
		}
	}
</script>

<style lang="scss" scoped>
	.page {
		background-color: #F2F2F2;
		height: 100vh;
		overflow: hidden;

		.button {
			width: 694rpx;
			height: 87rpx;
			background-color: #FFBB50;
			border-radius: 64rpx;
			line-height: 87rpx;
			text-align: center;
			font-size: 30rpx;
			color: #fff;
			margin: 50rpx auto 0;
		}

		.swiper {
			margin-top: 30rpx;
			height: 32rpx;
			width: 85%;
			margin: 30rpx auto 0;
		}

		.swiper-item {
			font-size: 22rpx;
			height: 32rpx;
			display: flex !important;
			align-items: center !important;
			text-align: center !important;

			.title {
				flex: 1;
				overflow: hidden;
				white-space: nowrap;
				overflow: hidden;
				text-overflow: ellipsis;
			}

			image {
				width: 30rpx;
				height: 30rpx;
				margin-right: 16rpx;
			}
		}

	}

	.top {
		background-image: linear-gradient(to bottom, #FFB850, #F2F2F2);
		width: 100%;
		height: 400rpx;
		position: relative;

		.top-text {
			font-size: 40rpx;
			color: #fff;
			position: absolute;
			top: 20rpx;
			left: 100rpx;
		}

		.top-text-1 {
			font-size: 40rpx;
			color: #fff;
			position: absolute;
			top: 70rpx;
			left: 100rpx;
		}

		.top-img {
			width: 170rpx;
			height: 149rpx;
			position: absolute;
			top: 10rpx;
			right: 120rpx;
		}
	}

	.box {
		width: 670rpx;
		padding: 0 32rpx;
		margin: -245rpx auto 0;
		position: relative;
		z-index: 9;
		border-radius: 12rpx;
		background: #fff;

		.el-item {
			padding: 24rpx 0;
			border-bottom: 1rpx solid#D7D7D7;
			display: flex;
			justify-content: space-between;

			input {
				font-size: 26rpx;
				text-align: right;
			}

			textarea {
				font-size: 26rpx;
				height: 100rpx;
				margin-top: 20rpx;
			}

			.input-1 {
				width: 200rpx;
			}

			.input-2 {
				margin-right: 20rpx;
			}

			.el-item-title {
				font-size: 25rpx;

				span {
					color: red;
				}
			}
		}
	}
</style>